<style scoped lang="scss">
    .tooltip01 {
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 13px;
    }
    .overflow1{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    
    }
</style>
<template>
    <el-tooltip class="item" effect="dark"
                :content="`${innervalue||''}`||this.$slots&&this.$slots.default&&this.$slots.default[0]&&this.$slots.default[0].text"
                placement="top-start"
    >
                <span>
                <span v-if="innervalue" :class="`overflow${$props.overflow}`">{{innervalue}}</span>
                <slot v-else></slot>
                </span>
    
    </el-tooltip>
    <!--       <div class="tooltip01" role="tooltip">{{this.$slots&&this.$slots.default&&this.$slots.default[0]&&this.$slots.default[0].text}}</div>-->
</template>
<script>
  import { createUuid } from '../../utils';
  //import { createPopper } from '@popperjs/core';
  
  export default {
    data() {
      var uuid = createUuid();
      return {
        uuid,
        innervalue: '',
      };
    },
    props: {
      value: {
        type: [Number, String],
      },
      overflow:{
        type: [Number, String],
      }
    },
    watch: {
      '$props.value': {
        handler(text) {
          this.innervalue = text;
        },
        immediate:true
      },
    },
    mounted() {
      /*  var tooltip = this.getDivDom();
        const button = document.querySelector('.overflow1');
        createPopper(button, tooltip, {
          placement: 'top',
        });*/
    },
    methods: {
      getDivDom() {
        var _dom = document.getElementById(this.uuid);
        if (_dom) {
          return _dom;
        } else {
          var divElement = document.createElement('div');
          divElement.id = this.uuid;
          divElement.className = `tooltip01`;
          document.documentElement.appendChild(divElement);
          return divElement;
        }
      },
      
    },
  };
</script>
